<template>
  <div class="add-address">
    <div class="header">
      <div @click="$router.push({name:'Address'})">
          <a-icon type="left" />
      </div>
      <div>
          <h1>新建地址</h1>
      </div>
    </div>
    <div class="content">
      <a-form-model ref="ruleForm" :model="tempAddress" :rules="rules">
        <a-form-model-item label="姓名" prop="user_name">
          <a-input v-model="tempAddress.user_name"/>
        </a-form-model-item>
        <a-form-model-item label="手机号" prop="user_phone">
          <a-input v-model="tempAddress.user_phone"/>
        </a-form-model-item>
        <a-form-model-item label="地址" prop="address_location">
          <a-input @click="selectLocation" v-model="tempAddress.address_location">
            <a-tooltip slot="suffix" title="选择地址" @click="selectLocation">
              <span style="color: rgb(95, 134, 185)">选择地址</span>
            </a-tooltip>
          </a-input>
        </a-form-model-item>

        <a-form-model-item label="门牌号">
          <a-input v-model="tempAddress.address_doorplate"/>
        </a-form-model-item>

        <a-form-model-item label="标签">
          <a-radio-group default-value="0" v-model="tempAddress.label">
            <a-radio-button value="0">家</a-radio-button>
            <a-radio-button value="1">学校</a-radio-button>
            <a-radio-button value="2">其他</a-radio-button>
          </a-radio-group>
        </a-form-model-item>

        <a-form-model-item>
          <a-button type="primary" block shape="round" @click="onSubmit()">保存</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>

export default {
  
  data() {
    return {
      rules: {
        user_name: [
          { required: true, message: '请填写姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '请输入正确姓名', trigger: 'blur' },
        ],
        user_phone: [{ required: true, message: '请输入正确的手机号', trigger: 'blur' }],
        address_location:[{required:true,message:'请输入正确的地址',trigger:'blur'}]
      }
    }
  },
  methods:{
    //push到AddressSelect页面
    selectLocation(){
      this.$router.push({name:'AddressSelect'})
    },
    onSubmit(){
      this.$refs.ruleForm.validate(valid=>{
        if(valid){
          //把数据加到用户个人信息的common_address里
          this.$store.dispatch("setCommonAddress",this.tempAddress);
          //把页面推到Address页面
          this.$router.push({name:'Address'})
        }else{
          return false;
        }
      })
    },
    
  },
  //取值
  computed:{
    tempAddress(){
      return this.$store.getters.tempAddress;
    }
  }
};
</script>
<style lang="scss" scoped>
.header{
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
  color: black;
  padding: 15px;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 5px 2px rgba($color: #ccc, $alpha: 0.1);
  div {
    flex-grow: 1;
   h1 {
      margin: 0px;
      font-size: 1.5rem;
      font-weight: bolder;
    }
  }
}
.content {
  padding: 15px;
}
</style>